<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="left"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="请求接口">
              <span>{{ props.row.url }}</span>
            </el-form-item>
            <el-form-item label="请求长度">
              <span>{{ props.row.c_length }}</span>
            </el-form-item>

            <el-form-item label="请求耗时">
              <span>{{ props.row.r_time }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        v-loading="loading"
        align="center"
        label="ID"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="{row}">
          <span>{{ row.log_id }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="180px"
        align="center"
        label="用户IP"
      >
        <template slot-scope="{row}">
          <span>{{ row.ip }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="180px"
        align="center"
        label="IP所属地"
      >
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column
        min-width="300px"
        align="center"
        label="浏览器信息"
      >
        <template slot-scope="{row}">
          <span>{{ row.browser }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="110px"
        align="center"
        label="请求接口"
      >
        <template slot-scope="{row}">
          <span>{{ row.url | urlFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="访问时间"
        width="200"
      >
        <template slot-scope="{row}">
          <span>{{ row.access_time }}</span>
        </template>
      </el-table-column>

      <el-table-column
        width="120px"
        align="center"
        label="状态码"
      >
        <template slot-scope="{row}">
          <el-tag :type='row.code_status | statusFilter'>
            {{ row.code_status }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        v-if="listQuery.type != 'LoginLog' "
        class-name="status-col"
        label="用户类型"
        width="110"
      >
        <template slot-scope="{row}">
          <el-tag :type='row.type | typeColorFilter'>
            {{ row.type | typeFilter}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="请求方式"
        width="110"
      >
        <template slot-scope="{row}">
          <el-tag>
            {{ row.method }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { getLogs } from "../../../api/admin-api/log";
export default {
  components: { Pagination },
  props: {
    type: {
      type: String,
      default: "LoginLog",
    },
  },
  data() {
    return {
      list: null,
      listQuery: {
        page: 0,
        limit: 5,
        type: this.type,
      },
      total: 0,
      loading: false,
    };
  },
  created() {
    this.getList();
  },

  // 过滤
  filters: {
    // 权限
    typeColorFilter(type) {
      const typeMap = {
        1: "success",
        2: "warning",
        3: "",
      };
      return typeMap[type];
    },
    typeFilter(i) {
      if (i == 1) {
        return "管理员";
      }
      if (i == 2) {
        return "教师";
      }
      if (i == 3) {
        return "学生";
      }
    },
    // 状态码
    statusFilter(status) {
      if (status == 200) {
        return "success";
      } else if (status == 304) {
        return "info";
      } else {
        return "danger";
      }
    },
    // url过长省略
    urlFilter(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    },
  },

  methods: {
    getList() {
      getLogs(this.listQuery.page, this.listQuery.limit, this.type).then(
        (res) => {
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
      this.loading = true;
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>

